<template>
  <view class="content">
    <!-- :style="{
			'padding-top':height+'px'
		}" -->
    <!-- <view :style="{
			'height':statusBarHeight+'px' 
		}">

		</view> -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#fff"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">推荐有礼</view>
    </view>
    <view
      class="content_bg"
      :style="{
        top: 0,
      }"
    >
      <view class="rule" @click.stop="countOpen(0)"> 推荐规则 </view>
      <view class="rule_text">
        最好的朋友，要一起探索山海， 赢得生命的宝藏！
      </view>
    </view>
    <view class="" style="width: 100%; height: 419rpx"> </view>
    <!-- <view style="width: 100%;height: 269rpx;">

		</view> -->
    <view class="box">
      <scroll-view scroll-y="true" :style="{ height: scrollHeihgt + 'px' }">
        <view class="invitation_rewards">
          <view class="invitation_rewards_title"> 邀请奖励 </view>
          <view class="integral">
            <view class="integral_t"> 可获得积分 </view>
            <view class="integral_c">
              <text class="c_text">{{ datas.yongjin }}</text
              >={{ datas.yongjin_r }}元
            </view>
            <view class="integral_b"> 领取后30天内有效 </view>
          </view>

          <view class="invitation_btn" @click="viewRewards">
            查看邀请奖励记录
          </view>
          <view class="invitation_btn2">
            <view class="btn2_item" @click="show = true"> 发送邀请海报 </view>
            <view class="btn2_item" @click="show1 = true"> 面对面邀请 </view>
          </view>
        </view>

        <view class="achieve">
          <view class="achieve_title">
            <text style="font-size: 32rpx">我的成就</text>
            <text class="method" @click="countOpen('1')">计算方法</text>
          </view>
          <view class="stop_invite">
            <view class="stop_item">
              <view class="stop_item_t">
                <text class="stop_item_text">{{ info.renshu }}</text
                >人
              </view>
              <view class="stop_item_b"> 已邀请好友 </view>
            </view>

            <view class="stop_item">
              <view class="stop_item_t">
                <text class="stop_item_text">{{ info.jiesheng }}</text
                >人
              </view>
              <view class="stop_item_b"> 帮好友节省 </view>
            </view>

            <view class="stop_item">
              <view class="stop_item_t">
                <text class="stop_item_text">{{ info.jiangli }}</text
                >人
              </view>
              <view class="stop_item_b"> 已获得奖励 </view>
            </view>
          </view>
          <view class="invitation_record" @click="viewRecord">
            <text class="record_text">查看邀请记录</text>
            <u-icon name="arrow-right" color="#ADADAD" size="22"></u-icon>
          </view>

          <view class="invitation_introduce">
            <view class="invitation_introduce_title">
              如何向好友介绍华胥星球
            </view>
            <view class="invitation_introduce_text" v-html="datas.jieshao">
              {{ datas.jieshao }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <u-popup :show="show" @close="close" @open="open" mode="center">
      <view
        class="share_posters"
        :style="{
          'background-image': 'url(' + haibaoImg + ')',
          backgroundRepeat: 'no-repeat',
          backgroundSize: '100% 100%',
          backgroundAttachment: 'fixed',
        }"
      >
        <view class="posters_close" @click="show = false">
          <u-icon name="close" color="#fff" size="22"></u-icon>
        </view>
        <view class="posters_text">
          最好的朋友，要一起探索山海， 赢得生命的宝藏！
        </view>
        <view class="qrcode"> 邀请码：{{ invitation_code }} </view>
        <view class="posters_qrcode">
          <image :src="qrcode" mode=""></image>
        </view>
        <view class="posters_btn" @click="toShare"> 去分享海报 </view>
      </view>
    </u-popup>

    <u-popup :show="show1" @close="close1" @open="open1" mode="center">
      <view class="to_face">
        <view class="to_face_close" @click="show1 = false">
          <u-icon name="close" color="#fff" size="22"></u-icon>
        </view>
        <view class="to_face_text">
          最好的朋友，要一起探索山海， 赢得生命的宝藏！
        </view>
        <view class="to_face_qrcode">
          <image :src="qrcode" mode=""></image>
          <view class="qrcode_tip"> 请好友扫一扫上面的二维码，邀请Ta加入 </view>
        </view>
      </view>
    </u-popup>



    <u-popup
      :show="countShow"
      @close="countShow = false"
      @open="countShow = true"
      mode="center"
    >
      <view class="count_show">
        <view class="count_titile">
          {{ title }}
        </view>
        <view class="count_content" v-html="content">
          <!-- {{content}} -->
        </view>
        <view class="count_btn" @click="countShow = false"> 知道了 </view>
      </view>
    </u-popup>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import { qrcode, yaoqing } from "@/common/api/xingzhe.js";
import storage from "@/common/storage.js"; // 缓存封装
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      show: false,
      show1: false,
      countShow: false,
      title: "",
      content: "",
      qrcode: "",
      info: {},
      datas: {},
      scrollHeihgt: 0,
      invitation_code: "",
      haibaoImg: "",
      haibaoImgDownLoad: "",
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          console.log("resssssss", data);
          this.height = data.height;
          // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".content_bg").fields({
        size: true,
      });
      query.exec((data) => {
        let sum = 0;
        console.log("dddddddata", data);
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeihgt = windowHeihgt - sum + 15;
      });
    });
  },
  onLoad() {
    this.getQrcode();
    this.getYapqing();
  },
  methods: {
    getQrcode() {
      qrcode().then((res) => {
        console.log("resssss", res);

        this.qrcode = res.data.info.qrcode;
        this.invitation_code = res.data.info.invitation_code;
        this.haibaoImg = res.data.info.bg_img;
        this.haibaoImgDownLoad = res.data.info.img;
        console.log(this.haibaoImg, "有海报吗");
      });
    },
    getYapqing() {
      yaoqing({})
        .then((res) => {
          console.log("rrrrrrresyyyao", res);
          this.info = res.data.info;
          this.datas = res.data.yaoqing;
        })
        .catch((err) => {});
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    viewRewards() {
      uni.navigateTo({
        url: "/pages/member/invitationRewards",
      });
    },
    viewRecord() {
      uni.navigateTo({
        url: "/pages/member/InvitationRecord",
      });
    },
    countOpen(count) {
      console.log("bugggggger");
      if (count == 1) {
        this.title = "计算方法";
        // this.content = "告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内";
        this.content = this.datas.jisuanfangshi;
      } else {
        this.title = "【邀请新用户】活动规则";
        this.content = this.datas.rule;
        // this.content = "Robin Williams在《写给大家看的设计书》中提出界面设计四大原则。1、对比：避免页面上的元素太过相似，如果元素是有区别的，那就让他们看起来截然不同。2、重复：让设计中的相同或类似的视觉要素在整个作品中重复出现，增加界面的条理性和统一性。3、对齐：任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉上联系。4、亲密：彼此相关的项应当靠近，归类在一起。如果多个项相互之间存在很近的亲密性，他们就会成为一个视觉单元，而不是多个孤立的元素。";
      }
      this.countShow = true;
    },
    close() {
      this.show = false;
    },
    open() {
      this.show = true;
    },
    toShare() {
      uni.showLoading({
				title: '下载中'
			});	
      // this.show = false;
      uni.downloadFile({
        url: this.haibaoImgDownLoad,
        header: {
          "Access-Token": storage.get("token"),
        },
        success: (res) => {
          if (res.statusCode === 200) {
            console.log("下载成功", res);
          }
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success() {
              uni.hideLoading();
              uni.showToast({
                title: "已保存到相册",
              });
            },
          });
        },
        fail: (err) => {
          uni.hideLoading();
          console.log("下载失败了", err);
        },
      });
    },
    close1() {},
    open1() {},
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 9999;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #ff8a4c;
    font-size: 30rpx;
    display: flex;
    flex-direction: row-reverse;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #fff;
  }
}

.content_bg {
  width: 100%;
  height: 419rpx;
  margin: 0;
  background: url("/static/images/pic_tjyl_beijing.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  box-sizing: border-box;
  // position: fixed;
  // left: 0;
  // top: 0;
  position: fixed;
  z-index: 999;

  .rule {
    position: absolute;
    right: 0;
    top: 127rpx;
    width: 174rpx;
    height: 56rpx;
    background: #fcaa53;
    border-radius: 32rpx 0rpx 0rpx 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rule_text {
    width: 532rpx;
    position: absolute;
    left: 40rpx;
    bottom: 110rpx;
    font-size: 38rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 66rpx;
  }
}

.box {
  width: 100%;
  background: #111111;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  z-index: 999;
  position: relative;
  top: -35rpx;

  .invitation_rewards {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;

    .invitation_rewards_title {
      width: 100%;
      padding: 32rpx 0;
      box-sizing: border-box;
    }

    .integral {
      width: 100%;
      height: 250rpx;
      background: #272727;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .integral_t {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #adadad;
        margin-top: 32rpx;
      }

      .integral_c {
        font-size: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-top: 8rpx;
        display: flex;
        align-items: center;

        .c_text {
          font-size: 60rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #eeeeee;
        }
      }

      .integral_b {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ee6060;
      }
    }

    .invitation_btn {
      width: 100%;
      height: 96rpx;
      background: #ff8a4c;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 48rpx;
    }

    .invitation_btn2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;

      .btn2_item {
        width: 333rpx;
        height: 96rpx;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        opacity: 1;
        border: 1rpx solid #ff8a4c;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ff8a4c;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .achieve {
    margin-top: 40rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .achieve_title {
      padding: 32rpx 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .method {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        position: relative;
        top: 21rpx;
      }
    }

    .stop_invite {
      width: 100%;
      display: flex;
      background: #272727;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border-bottom: 1rpx solid #3d3d3d;

      .stop_item {
        flex: 1;
        height: 198rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .stop_item_t {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #888888;

          .stop_item_text {
            font-size: 56rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #eeeeee;
          }
        }

        .stop_item_b {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 4rpx;
        }
      }
    }
  }

  .invitation_record {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background: #272727;
    border-radius: 0 0 16rpx 16rpx;

    .record_text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
    }
  }

  .invitation_introduce {
    width: 100%;
    padding: 0 30rpx 98rpx;
    box-sizing: border-box;
    margin-top: 72rpx;

    .invitation_introduce_title {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
    }

    .invitation_introduce_text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #adadad;
      line-height: 42rpx;
      margin-top: 16rpx;
      padding-bottom: 32rpx;
      box-sizing: border-box;
    }
  }
}
.share_posters {
  width: 630rpx;
  height: 1120rpx;
  margin: 0;
  // background: url("/static/images/pic_tjyl_beijing.png") no-repeat;
  // background-size: 100% 100%;
  // background-attachment: fixed;
  position: relative;
  border-radius: 24rpx;
  .posters_close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }
  .posters_text {
    font-size: 38rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 66rpx;
    position: absolute;
    top: 200rpx;
    left: 40rpx;
    padding-right: 18rpx;
    width: 532rpx;
    box-sizing: border-box;
  }
  .qrcode {
    color: #666;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    position: absolute;
    left: 200rpx;
    bottom: 402rpx;
    -webkit-user-select: text;
  }
  .posters_qrcode {
    width: 218rpx;
    height: 218rpx;
    position: absolute;
    left: 206rpx;
    bottom: 112rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .posters_btn {
    width: 630rpx;
    height: 96rpx;
    background: #ff8a4c;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -136rpx;
    left: 0;
  }
}
/deep/.u-transition{
  overflow: auto;
  padding-bottom: 140rpx;
  // box-sizing: border-box;
}

/deep/.u-popup__content {
  border-radius: 24rpx;
}
.to_face {
  width: 630rpx;
  height: 1120rpx;
  margin: 0;
  background: url("/static/images/pic_tjyl_beijing.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
  border-radius: 24rpx;
  .to_face_close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }
  .to_face_text {
    font-size: 38rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 66rpx;
    position: absolute;
    top: 200rpx;
    left: 40rpx;
    padding-right: 18rpx;
    width: 532rpx;
    box-sizing: border-box;
  }
  .to_face_qrcode {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0rpx;
    bottom: 200rpx;
    image {
      width: 406rpx;
      height: 406rpx;
    }
  }
  .qrcode_tip {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-top: 20rpx;
  }
}
.count_show {
  width: 640rpx;
  background: #eeeeee;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  .count_titile {
    width: 512rpx;
    font-size: 34rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #272727;
    padding: 64rpx 64rpx 24rpx;
    text-align: center;
  }
  .count_content {
    width: 100%;
    padding: 0 64rpx 64rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 44rpx;
    border-bottom: 1rpx solid #e5e5e5;
  }
  .count_btn {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #55b877;
    text-align: center;
    padding: 32rpx 0;
  }
}
</style>